// JavaScript Document

//如何在一个网站或者一个页面，去书写你的JS代码：

//1.js的分层(功能) : jquery(tools)  组件(ui)  应用(app), mvc(backboneJs)
//2.js的规划(管理) : 避免全局变量和方法(命名空间，闭包，面向对象) , 模块化(seaJs,requireJs)

window.onload = function () {
    mv.app.toTip();
    mv.app.toBanner();
    mv.app.toSel();
    mv.app.toRun();
    mv.app.toChange();
    mv.app.toPop();
    mv.app.toSign();
};

var mv = {};  //命名空间

mv.tools = {};

mv.tools.getByClass = function (oParent, sClass) {
    var aEle = oParent.getElementsByTagName('*');
    var arr = [];

    for (var i = 0; i < aEle.length; i++) {
        if (aEle[i].className == sClass) {
            arr.push(aEle[i]);
        }
    }

    return arr;
};

mv.tools.getStyle = function (obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    }
    else {
        return getComputedStyle(obj, false)[attr];
    }
};

mv.ui = {};

mv.ui.textChange = function (obj, str) {

    obj.onfocus = function () {
        if (this.value == str) {
            this.value = '';
        }
    };

    obj.onblur = function () {
        if (this.value == '') {
            this.value = str;
        }
    };

};

mv.ui.fadeIn = function (obj) {

    var iCur = mv.tools.getStyle(obj, 'opacity');
    if (iCur == 1) { return false; }

    var value = 0;
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var iSpeed = 5;
        if (value == 100) {
            clearInterval(obj.timer);
        }
        else {
            value += iSpeed;
            obj.style.opacity = value / 100;
            obj.style.filter = 'alpha(opacity=' + value + ')';
        }
    }, 30);

};

mv.ui.fadeOut = function (obj) {

    var iCur = mv.tools.getStyle(obj, 'opacity');
    if (iCur == 0) { return false; }

    var value = 100;
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var iSpeed = -5;
        if (value == 0) {
            clearInterval(obj.timer);
        }
        else {
            value += iSpeed;
            obj.style.opacity = value / 100;
            obj.style.filter = 'alpha(opacity=' + value + ')';
        }
    }, 30);

};

mv.ui.moveLeft = function (obj, old, now) {

    clearInterval(obj.timer);
    obj.timer = setInterval(function () {

        var iSpeed = (now - old) / 10;
        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

        if (now == old) {
            clearInterval(obj.timer);
        }
        else {
            old += iSpeed;
            obj.style.left = old + 'px';
        }

    }, 30);

};

mv.app = {};

mv.app.toTip = function () {
    var oText1 = document.getElementById('text1');
    var oText2 = document.getElementById('text2');

    mv.ui.textChange(oText1, '请输入关键字');
    mv.ui.textChange(oText2, '请输入关键字');

};

mv.app.toBanner = function () {
    var oDd = document.getElementById('ad');
    var aLi = oDd.getElementsByTagName('li');

    var oPrevBg = mv.tools.getByClass(oDd, 'prev_bg')[0];
    var oNextBg = mv.tools.getByClass(oDd, 'next_bg')[0];

    var oPrev = mv.tools.getByClass(oDd, 'prev')[0];
    var oNext = mv.tools.getByClass(oDd, 'next')[0];

    var iNow = 0;

    var timer = setInterval(auto, 3000);

    function auto() {

        if (iNow == aLi.length - 1) {
            iNow = 0;
        }
        else {
            iNow++;
        }

        for (var i = 0; i < aLi.length; i++) {
            mv.ui.fadeOut(aLi[i]);
        }

        mv.ui.fadeIn(aLi[iNow]);

    }

    function autoPrev() {

        if (iNow == 0) {
            iNow = aLi.length - 1;
        }
        else {
            iNow--;
        }

        for (var i = 0; i < aLi.length; i++) {
            mv.ui.fadeOut(aLi[i]);
        }

        mv.ui.fadeIn(aLi[iNow]);

    }

    oPrevBg.onmouseover = oPrev.onmouseover = function () {
        oPrev.style.display = 'block';
        clearInterval(timer);
    };

    oNextBg.onmouseover = oNext.onmouseover = function () {
        oNext.style.display = 'block';
        clearInterval(timer);
    };

    oPrevBg.onmouseout = oPrev.onmouseout = function () {
        oPrev.style.display = 'none';
        timer = setInterval(auto, 3000);
    };

    oNextBg.onmouseout = oNext.onmouseout = function () {
        oNext.style.display = 'none';
        timer = setInterval(auto, 3000);
    };

    oPrev.onclick = function () {
        autoPrev();
    };

    oNext.onclick = function () {
        auto();
    };

};

mv.app.toSel = function () {
    var oSel = document.getElementById('sel1');
    var aDd = oSel.getElementsByTagName('dd');
    var aUl = oSel.getElementsByTagName('ul');
    var aH2 = oSel.getElementsByTagName('h2');

    for (var i = 0; i < aDd.length; i++) {
        aDd[i].index = i;
        aDd[i].onclick = function (ev) {
            var ev = ev || window.event;
            var This = this;

            for (var i = 0; i < aUl.length; i++) {
                aUl[i].style.display = 'none';
            }

            aUl[this.index].style.display = 'block';

            document.onclick = function () {
                aUl[This.index].style.display = 'none';
            };

            ev.cancelBubble = true;

        };

    }

    for (var i = 0; i < aUl.length; i++) {

        aUl[i].index = i;

        (function (ul) {

            var aLi = ul.getElementsByTagName('li');

            for (var i = 0; i < aLi.length; i++) {
                aLi[i].onmouseover = function () {
                    this.className = 'active';
                };
                aLi[i].onmouseout = function () {
                    this.className = '';
                };
                aLi[i].onclick = function (ev) {
                    var ev = ev || window.event;
                    aH2[this.parentNode.index].innerHTML = this.innerHTML;
                    ev.cancelBubble = true;
                    this.parentNode.style.display = 'none';
                };
            }

        })(aUl[i]);
    }

};

mv.app.toRun = function () {
    var oRun = document.getElementById('run1');
    var oUl = oRun.getElementsByTagName('ul')[0];
    var aLi = oUl.getElementsByTagName('li');

    var oPrev = mv.tools.getByClass(oRun, 'prev')[0];
    var oNext = mv.tools.getByClass(oRun, 'next')[0];

    var iNow = 0;

    oUl.innerHTML += oUl.innerHTML;

    oUl.style.width = aLi.length * aLi[0].offsetWidth + 'px';

    oPrev.onclick = function () {

        if (iNow == 0) {
            iNow = aLi.length / 2;
            oUl.style.left = -oUl.offsetWidth / 2 + 'px';
        }

        mv.ui.moveLeft(oUl, -iNow * aLi[0].offsetWidth, -(iNow - 1) * aLi[0].offsetWidth);

        iNow--;

    };

    oNext.onclick = function () {

        if (iNow == aLi.length / 2) {
            iNow = 0;
            oUl.style.left = 0;
        }

        mv.ui.moveLeft(oUl, -iNow * aLi[0].offsetWidth, -(iNow + 1) * aLi[0].offsetWidth);

        iNow++;

    };

    mv.app.toChange = function () {
        var oOl = document.getElementById('nav');
        var aLiOl = oOl.getElementsByTagName('li');

        for (var i = 0; i < aLiOl.length; i++) {
            aLiOl[i].onmouseover = function () {
                for (var k = 0; k < aLiOl.length; k++) {
                    aLiOl[k].className = '';
                }
                this.className = 'active';
            }
            aLiOl[i].onmouseout = function () {
                this.className = "";
            }
        }
    }

    mv.app.toPop = function () {
        var oOl = document.getElementById('Pop');
        var aLiOl = oOl.getElementsByTagName('li');
        var divName_1 = document.getElementById('Pop_SignUp');
        var divName_2 = document.getElementById('Pop_SignIn');

        for (var i = 0; i < aLiOl.length; i++) {
            aLiOl[i].onclick = function () {
                for (var k = 0; k < aLiOl.length; k++) {
                    aLiOl[k].className = '';
                }
                this.className = 'P_active';
                if (this.getAttribute('id') == "SignIn")
                {
                    divName_1.style.display = "none";
                    divName_2.style.display = "block";
                }
                if (this.getAttribute('id') == "SignUp") {
                    divName_1.style.display = "block";
                    divName_2.style.display = "none";
                }
            }
        }
    }

    mv.app.toSign = function () {
        var oText1 = document.getElementById('Intext1');
        var oText2 = document.getElementById('Intext2');

        oText1.onfocus = function () {
            this.style.border = "2px solid #3eabff";
        }
        oText1.onblur = function () {
            this.style.border = ""; 
        }

        oText2.onfocus = function () {
            this.style.border = "2px solid #3eabff";
        }
        oText2.onblur = function () {
            this.style.border = "";
        }
    }
};








